<!-- 全局配置 -->
<template>
  <div class="">
    <p class="title">分享配置</p>
    <STable ref="table" size="default" rowKey="id" :columns="columns" :data="loadData">
      <template slot="iconUrl" slot-scope="text">
        <div class="disFlxCC">
          <ImgOrVideo v-if="text" :item="{ url: text }" preview :width="50" :height="40" />
        </div>
      </template>
      <template slot="action" slot-scope="row">
        <a-button
          v-has="'web:miniProgram:edit'"
          type="primary"
          ghost
          size="small"
          class="_mr-5"
          @click="handleEdit(row)"
        >
          编辑
        </a-button>
      </template>
    </STable>

    <p class="title">基础配置</p>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="分享标题">
        <a-input v-model="form.shareTitle" style="width: 300px" placeholder="请输入分享标题" allowClear />
      </a-form-model-item>
      <a-form-model-item label="分享页面">
        <UploadImg v-model="form.shareImgUrl" warehouse cropper :width="125" :height="100" :cropperEnlarge="2">
          <template #tips> 500*400 </template>
        </UploadImg>
      </a-form-model-item>
      <!-- <a-form-model-item label="图片缺失默认显示">
        <UploadImg v-model="form.defaultImgUrl" warehouse cropper>
          <template #tips>
            建议: 200*200
          </template>
        </UploadImg>
      </a-form-model-item> -->
      <a-form-model-item label="开屏页面">
        <UploadImg v-model="form.indexImgUrl" warehouse cropper :width="150" :height="337" :cropperEnlarge="5">
          <template #tips> 750*1685 </template>
        </UploadImg>
      </a-form-model-item>
      <a-form-model-item label="邀请入会海报">
        <UploadImg v-model="form.posters" warehouse cropper :width="183" :height="240" :cropperEnlarge="3">
          <template #tips> 915*1200 </template>
        </UploadImg>
      </a-form-model-item>
      <a-form-model-item label="公众号二维码(引导关注)" prop="officialAccounts">
        <UploadImg v-model="form.officialAccounts" warehouse cropper :cropperEnlarge="2">
          <template #tips> 100*100 </template>
        </UploadImg>
      </a-form-model-item>
      <a-form-model-item label="主题颜色">
        <div style="line-height: 21px">
          <Sketch v-model="form.themeColor" @input="changeColor" />
        </div>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button @click="handleReset">取消</a-button>
        <a-button v-has="'web:miniProgram:edit'" type="primary" style="margin-left: 10px" @click="onSubmit"
          >保存</a-button
        >
      </a-form-model-item>
    </a-form-model>

    <EditModal ref="editModal" @success="$refs.table.refresh()" />
  </div>
</template>

<script>
import { STable } from '@/components'
import { configApp, saveConfigApp, configAppBasisDataList } from '@/api/web/web'
import EditModal from './editModal.vue'
import { Sketch } from 'vue-color'
import Vue from 'vue'
import { TENANTID } from '@/store/mutation-types'
import ImgOrVideo from '@/components/ImgOrVideo'
import UploadImg from '@/components/UpFile/uploadImg'

export default {
  components: {
    STable,
    EditModal,
    Sketch,
    ImgOrVideo,
    UploadImg,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      listLoading: false,
      pageNum: 1,
      pageSize: 10,
      columns: [
        {
          title: '分享类型',
          dataIndex: 'name',
        },
        {
          title: '分享标题',
          dataIndex: 'desc',
        },
        {
          title: '分享图',
          dataIndex: 'iconUrl',
          scopedSlots: { customRender: 'iconUrl' },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],
      loadData: (parameter) => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
        }
        // this.listLoading = true;
        return configAppBasisDataList(Object.assign(params, { type: 4 })).then((res) => {
          this.listLoading = false
          this.pageNum = parameter.pageNum
          this.pageSize = parameter.pageSize
          return res
        })
      },
      form: {
        id: undefined,
        shareTitle: undefined,
        shareImgUrl: undefined,
        defaultImgUrl: undefined,
        indexImgUrl: undefined,
        privacyPolicy: undefined,
        officialAccounts: undefined,
        posters: undefined,
        tenantId: Vue.ls.get(TENANTID),
        themeColor: '#ffffff',
      },
      rules: {
        officialAccounts: [{ required: true, message: '请上传公众号二维码', trigger: 'change' }],
      },
      configData: {},
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getConfigApp() {
      let { data } = await configApp()
      let newData = data || {}
      this.configData = newData
      Object.keys(newData).forEach((k) => {
        this.form[k] = newData[k]
      })
    },
    handleEdit(row) {
      this.$refs.editModal.show(row)
    },
    uploadSuccess(type, file, imagePathBig) {
      if (imagePathBig) this.form[type] = file.imagePathBig
      else this.form[type] = file.imagePathSmall
    },
    delImage(field) {
      this.form[field] = ''
    },
    handleReset() {
      Object.keys(this.form).forEach((k) => {
        this.form[k] = this.configData[k]
      })
    },
    changeColor(color) {
      this.form.themeColor = color.hex
    },
    async onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { code, msg } = await saveConfigApp({ ...this.form, themeColor: this.form.themeColor })
          this.$message[code === 0 ? 'success' : 'error'](msg)
          if (code === 0) {
            this.getConfigApp()
          }
        }
      })
    },
  },
  created() {
    this.getConfigApp()
  },
  mounted() {},
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload > img {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.title {
  font-size: 18px;
  font-weight: bold;
}

.color_poick {
  display: flex;
  justify-content: space-between;
  width: 590px;
}
.box_xxx {
  width: 300px;
  height: 300px;
}
.box1 {
  margin-left: 50px;
}
</style>